<!--修改员工信息-->
<template>
<div>
  <el-dialog title="修改界面" :visible.sync="showFlag" @close="closeDialog" width="40%">
    <el-form ref="editStaffForm" :model="editStaffForm" :rules="editStaffRules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="realName">
            <el-input v-model="editStaffForm.realName" placeholder="请输入员工姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生年月" prop="birth">
            <el-date-picker v-model="editStaffForm.birth" type="date" style="width:100%" placeholder="请选择出生年月" format="yyyy-MM-dd"  value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
        
      <el-row>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="editStaffForm.sex" placeholder="请选择性别" :clearable=true style="width:100%">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工电话" prop="tel">
            <el-input v-model="editStaffForm.tel" placeholder="请输入员工电话"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="公寓名称" prop="aptName">
            <el-input v-model="editStaffForm.aptName" placeholder="请输入公寓名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房间号" prop="roomId">
            <el-input v-model="editStaffForm.roomId" placeholder="请输入房间id"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="职务" prop="position">
            <el-input v-model="editStaffForm.position" placeholder="请输入职务"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入住时间" prop="inTime">
            <el-date-picker v-model="editStaffForm.inTime" style="width:100%" type="date" placeholder="请选择入住时间" format="yyyy-MM-dd"  value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item class="dialog-footer" align="center">
        <el-button type="success" @click="onSave('editStaffForm')">保 存</el-button>
        <el-button @click="onCancel('editStaffForm')">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
</template>

<script>
export default {
name: "editStaff",
  data(){
    const telValidate = (rule, value, callback) => {
      const reg = /^1[3|4|5|8][0-9]\d{4,8}$/
        if (!value) {
          callback(new Error('请输入手机号'))
        }  else if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
    }
  return{
    editStaffForm:{
      id:'',
      name:'',
      realName: '',
      tel:'',
      birth:'',
      sex:'',
      position:'',
      aptName:'',
      roomId:'',
      inTime:''
    },
    showFlag:false,
    editStaffRules:{
      realName:[{required:true, message: '请输入员工姓名', trigger: 'blur' },],
      username: [{required:true, message: '请输入用户名', trigger: 'blur' },],
      tel:[{required:true,validator: telValidate,trigger: 'blur'}]
    },
    temp:'',
  }
  },
  methods:{
  init(row){
    this.$nextTick(()=>{
      this.row=row
      this.getUserdetail(row)
    })
    this.showFlag=true
  },
    // 获得本行详细数据
    getUserdetail(row){
      this.editStaffForm=row
      this.editStaffForm.sex === 0 ? this.editStaffForm.sex='男' :this.editStaffForm.sex= '女'
    },
    //保存按钮
    onSave(){
      this.$refs.editStaffForm.validate(async valid=>{
        if(valid){
          console.log(this.editStaffForm.sex);
          if(this.editStaffForm.sex === '男' || this.editStaffForm.sex === '0'){
            this.editStaffForm.sex = 0
          }else{
            this.editStaffForm.sex = 1
          }
          let params={
            id:this.editStaffForm.id,
            name:this.editStaffForm.name,
            real_name: this.editStaffForm.realName,
            tel:this.editStaffForm.tel,
            birth:this.editStaffForm.birth,
            sex:this.editStaffForm.sex,
            position:this.editStaffForm.position,
            apt_name:this.editStaffForm.aptName,
            room_id:this.editStaffForm.roomId,
            in_time:this.editStaffForm.inTime
          }
          const {data:res}=await this.$http.post('/user/updateUserByEntity',params)
          if(res.code!==200) return this.$message.error('修改员工信息失败！')
          this.$message.success('修改员工信息成功~')
        }
      })
      this.showFlag=false
      this.$emit('editCallBack')
    },
    //取消按钮
    onCancel(){
      this.$refs.editStaffForm.resetFields()
      this.showFlag=false
    },
  //  关闭对话框的回调函数
    closeDialog(){
      this.$refs.editStaffForm.resetFields()
    }
  }
}
</script>

<style scoped>

</style>